import React, { Component } from 'react';
import { Modal, Table, Space, Form, Input, Button,Popconfirm,message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { FormInstance } from 'antd/lib/form';
import { _Room, _manger, _dels } from '../../../api/room';
import './index.less';
class Room extends Component {
  state = {
    isModalVisible: false,
    data: [],
  };
  formRef = React.createRef<FormInstance>();
  // 渲染页面
  componentDidMount() {
    this.getList()
  }
  getList = async() => {
    let room = await _Room();
    this.setState({
      data: room.data.data,
    });
  }
  // 遮罩层
  showModal = () => {
    this.setState({
      isModalVisible: true,
    });
  };
   handleCancel = () => {
    this.setState({
      isModalVisible: false,
    });
  };
  onReset = () => {
    this.setState({
      isModalVisible: false,
    });
  };
  // 添加
  onFinish = async (values: any) => {
    console.log(values);
    let manger = await _manger({
      room_text: values.primary,
    });
    if(manger.data.code === 1){
      this.getList()
    }
    console.log(manger);
    this.setState({
      isModalVisible: false,
    });
  };
  // 删除
  confirm = async (id: string) => {
    let del = await _dels({
      room_id: id,
    });
    if (del.data.code == 1) {
      this.getList();
    }
    message.success('删除成功');
  };
  cancel = (e: any) => {
    console.log(e);
    message.error('已取消');
  };
  render() {
    const { data } = this.state;
    const columns = [
      {
        title: '教室号',
        dataIndex: 'room_text',
      },
      {
        title: '操作',
        dataIndex: 'room_id',
        render: (text: any, record: any) => (
          <Space>
            <Popconfirm
              title="确定删除？"
              onConfirm={() => this.confirm(text)}
              onCancel={this.cancel}
              okText="确定"
              cancelText="取消"
            >
              <a>删除</a>
            </Popconfirm>
          </Space>
        ),
      },
    ];
    return (
      <div>
        <h2>教室管理</h2>
        <div className="room">
          <Button type="primary" className="primary" onClick={this.showModal}>
            <PlusOutlined />
            添加教室
          </Button>
          <Modal
            title="添加班级"
            visible={this.state.isModalVisible}
            onCancel={this.handleCancel}
            footer={null}
          >
            <Form
              ref={this.formRef}
              name="control-ref"
              onFinish={this.onFinish}>
              <Form.Item
                name="primary"
                label="教室号"
                rules={[{ required: true ,message: '教室号不能为空' }]}
              >
                <Input />
              </Form.Item>
              <Form.Item>
                <Button htmlType="button" onClick={this.onReset}>
                  取消
                </Button>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          </Modal>
          <div className="table">
            <Table columns={columns} dataSource={data} rowKey="room_id"></Table>
          </div>
        </div>
      </div>
    );
  }
}

export default Room;
